<template>
	<view class="goods-list-wrap wr-class" :id="independentID">
		<block v-for="(item,index) in goodsList" :key="index">
			<leisure-uni-goods-card :gid="item.spuId" :datap="item" currency="¥" :bgclass="cardBgClass"
				:bgbodyclass="cardBgBodyClass" :titleclass="cardTitleClass" :bgpriceclass="cardBgPriceClass"
				:class="goodsCardInside" :data-index="index" @thumb="onClickGoodsThumb" @click="onClickGoods"
				@add-cart="onAddCart" />
		</block>
	</view>
</template>

<script setup name="goods-list">
	import {
		defineComponent,
		watch,
		ref,
		computed,
		reactive,
		nextTick,
		onMounted
	} from 'vue'
	const app = getApp();
	const props = defineProps({
		goodsList: {
			type: Array,
			default: () => [],
		},
		id: {
			type: String,
			default: () => "",
		},
		cardBgClass: {
			type: String,
			default: () => "",
		},
		cardBgClass: {
			type: String,
			default: () => "",
		},
		cardBgBodyClass: {
			type: String,
			default: () => "",
		},
		cardTitleClass: {
			type: String,
			default: () => "",
		},
		cardBgPriceClass: {
			type: String,
			default: () => "",
		},
		goodsCardInside: {
			type: String,
			default: () => "",
		},
	});
	const independentID = ref("");
	const genIndependentID = (id) => {
		if (id) {
			independentID.value = id;
		} else {
			independentID.value = `goods-list-${~~(Math.random() * 10 ** 8)}`;
		}
	}
	onMounted(() => {
		genIndependentID(props.id || "");
	})

	const emit = defineEmits(['thumb', 'click', 'addcart']);

	const onClickGoodsThumb = (param) => {
		emit("thumb", param);
	}

	const onClickGoods = (param) => {
		emit("click", param);
	}

	const onAddCart = (param) => {
		emit("addcart", param);
	}
</script>

<style scoped>
	.goods-list-wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		padding: 0;
		background: #fff;
	}
</style>